body {
    margin: 0;
    padding: 0;
    background-color: rgb(238, 238, 238);
}
.container {
    flex: content;
    flex-direction: row;

}

.bar {
    display: flex;
    
    justify-content: space-between;

    img {
        width: 10vw;
        height: 10vw;
    }
    .title {
        display: flex;
        align-items: center;
        text-align: center;
        height: 10vw;
    }
}
@mixin describe($color) {
    box-sizing: border-box;
    border-radius: 4vw;
    padding: 2vw;
    background-color: white;
    display: flex;
    margin-bottom: 2vh;
    width: 100%;
        img {
            border-radius: 4vw;
            width: 30vw;
            height: 30vw;
        }
        .describe {
            height: 31vw;
            width: 60vw;
            margin-left: 2vw;
            display: flex;
            flex-direction: column;

            .top {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 5vw;
                font-weight: bold;
            }
            .detail {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 4vw;
                color: gray;
            }

            .lable {
                display: flex;

                .lable1 {
                    
                    width: 12vw;
                    height: 3vh;
                    border-radius: 2vw;
                    align-items: center;
                    text-align: center;
                    background-color: rgb(31, 31, 138);
                    color: aliceblue;
                }
                .lable2 {
                    width: 20vw;
                    height: 3vh;
                    margin-left: 3vw;
                    border-radius: 2vw;
                    align-items: center;
                    text-align: center;
                    background-color: $color;
                    // background-color: orange;
                    color: aliceblue;
                }
            }

            .bottom {
                display: flex;
                justify-content: space-between;
                margin-top: 5vw;

                .price {
                    color: rgb(192, 50, 50);
                }
                .opreation {
                    align-items: center;
                    text-align: center;
                    border-radius: 10vw;
                    color: azure;
                    background-color: red;
                    width: 22vw;
                }
            }
        }
}
.content {
    margin-top: 3vh;
    box-sizing: border-box;
    padding: 0 10px;
    display: flex;
    flex-direction: column;

    .item1 {
        @include describe(rgb(192, 50, 50))
    }
    .item2 {
        @include describe(orange);
    }
    .item3 {
        @include describe(orange);
    }
}